<template>
	<view class="mine-setting">
		<view class="line-button-group">
			<!-- <view class="line-button-style">
				<view class="left-content">
					<image class="button" src="/static/images/mine/inviteCode.png" mode="widthFix"></image>
					<view class="button-text">邀请码</view>
				</view>
				<view class="right-content">
					<image class="in" src="/static/images/common/in.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="line-bottom"></view>
			<view class="line-button-style">
				<view class="left-content">
					<image class="button" src="/static/images/mine/share.png" mode="widthFix"></image>
					<view class="button-text">分享奖励</view>
				</view>
				<view class="right-content">
					<image class="in" src="/static/images/common/in.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="line-bottom"></view>
			<view class="line-button-style">
				<view class="left-content">
					<image class="button" src="/static/images/mine/address.png" mode="widthFix"></image>
					<view class="button-text">链地址</view>
				</view>
				<view class="right-content">
					<image class="in" src="/static/images/common/in.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="line-bottom"></view>
			<view class="line-button-style">
				<view class="left-content">
					<image class="button" src="/static/images/mine/receipt_setting.png" mode="widthFix"></image>
					<view class="button-text">收款设置</view>
				</view>
				<view class="right-content">
					<image class="in" src="/static/images/common/in.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="line-bottom"></view>
			<view class="line-button-style">
				<view class="left-content">
					<image class="button" src="/static/images/mine/sign.png" mode="widthFix"></image>
					<view class="button-text">我的签约</view>
				</view>
				<view class="right-content">
					<image class="in" src="/static/images/common/in.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="line-bottom"></view> -->
			<view class="line-button-style" @click="userOut">
				<view class="left-content">
					<image class="button" src="/static/images/mine/share.png" mode="widthFix"></image>
					<view class="button-text">退出登录</view>
				</view>
				<view class="right-content">
					<image class="in" src="/static/images/common/in.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="line-bottom"></view>
		</view>
		<!-- 退出登录弹窗 -->
		<view class="loginOut-mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<text class="text-tips" :selectable="false">{{ tips }}</text>
						<view class="button-box">
							<view class="button-one" @click="cancel">取消</view>
							<view class="button-two" @click="confirmLoginOut">确定</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		loginOut
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 弹窗 */
				tips: '是否要退出登录?', // 弹窗提示
				showTips: false, // 退出登录弹窗状态
				message: '123'
			};
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {

			/* 退出登录 */
			userOut() {
				this.showTips = true;
			},

			/* 取消提示 */
			cancel() {
				this.showTips = false;
			},

			/* 确认退出登录 */
			confirmLoginOut() {
				const that = this;
				loginOut().then((res) => {
					const result = res;
					if (result.status == 1) {
						Fn.Toast("退出成功", 3, 1500);
						// localStorage.getItem('token');
						uni.removeStorageSync('token');
						uni.removeStorageSync('user_info');
						// location.reload(); // web页面 - 刷新页面
						this.showTips = false;
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login',
							})
						}, 1500);
					} else {
						Fn.Toast("退出失败，请稍后重试", 3, 1500);
						this.showTips = false;
					};
				});
			},
			
			/* 跳转至登录页面 */
			navigateLogin() {
				uni.navigateTo({
					url: '/pages/login/login',
				});
			},
		}
	}
</script>

<style lang="scss">
	.mine-setting {

		.loginOut-mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				// height: 390rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					font-weight: 600;
				}

				.inner-box {
					margin: 20rpx 20rpx 40rpx 20rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 36rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: bold;
						color: #89898C;
					}

					.button-box {
						text-align: center;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
						}

						.button-two {
							background-color: #000000;
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
						}
					}
				}
			}
		}

		.line-button-group {
			margin: 0 18px;

			.line-button-style {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 18px 3px;
				// border-bottom: 2px solid #F4F4F5;
				cursor: pointer;

				.left-content {
					display: flex;
					align-items: center;

					.button {
						width: 7vw;
						height: 7vw;
					}

					.button-text {
						margin-left: 18px;
						color: #686868;
						font-size: 15px;
					}
				}

				.right-content {

					.in {
						width: 3.7vw;
						height: 3.7vw;
					}
				}
			}

			.line-bottom {
				height: 2px;
				background-color: #F4F4F5;
			}
		}
	}
</style>
